<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo..</title>
    <script src="../common/vue.js" type="text/javascript"></script>
    <style type="text/css">

    </style>
</head>
<body>
<!--view-->


<div id="div_test">



    例如，假定我们有一个 multi-insertion 组件，它的模板为：

    <div>
        <slot name="one"></slot>
        <slot></slot>
        <slot name="two"></slot>
    </div>
    父组件模板：

    <multi-insertion>
        <p slot="one">One</p>
        <p slot="two">Two</p>
        <p>Default A</p>
    </multi-insertion>
    渲染结果为：

    <div>
        <p slot="one">One</p>
        <p>Default A</p>
        <p slot="two">Two</p>
    </div>
    在组合组件时，内容分发 API 是非常有用的机制。





</div>


<script type="text/javascript">


    Vue.component("user-profile",{
        template:'<span>哈哈哈啊哈哈</span>'

    })

    var parent = new Vue({
        el:"#parent"
    })


    var child = parent.$refs.profile;
    console.log(child);





</script>

</body>
</html>